<script setup>
//引入依赖
import {Map, View, Feature,Overlay} from 'ol'
import {Vector as VectorSource, OSM,Cluster} from 'ol/source';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {Point} from 'ol/geom'
import {Icon, Style, Fill, Stroke, Text} from 'ol/style';
import {toLonLat,fromLonLat} from 'ol/proj'
import icon from './image/icon.png'
import {ref,onMounted} from 'vue'
import XYZ from "ol/source/XYZ.js";

const value = ref('');
const type = ref('image');
const options = ref([{
  value: 'image',
  label: '图片标注'
}, {
  value: 'text',
  label: '文字标注'
}, {
  value: 'image_text',
  label: '图文标注'
}, {
  value: 'overlay',
  label: '覆盖标注'
}, {
  value: 'cluster',
  label: '聚合标注'
}])
const map = ref(null);
const vectorSource = ref(null);

const addTextVectorLabel = (coordinate) => {
  const newFeature = new Feature({
    geometry: new Point(coordinate),
    name: '文字标识'
  });
  newFeature.setStyle(createTextLabelStyle(newFeature));
  vectorSource.value.addFeature(newFeature);
}

const createTextLabelStyle = (feature)=>{
  return new Style({
    text: new Text({
      //位置
      textAlign: 'center',
      //基准线
      textBaseline: 'middle',
      //文字样式
      font: 'normal 14px 微软雅黑',
      scale: 2,
      //文本内容
      text: feature.get('name'),
      //文本填充样式（即文字颜色）
      fill: new Fill({color: '#ff3300'}),
      stroke: new Stroke({color: '#ffcc33', width: 2})
    })
  })
}

const createImageLabelStyle = ()=>{
  return new Style({
    image: new Icon({
      anchor: [0.5, 40],
      anchorOrigin: 'top-right',
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      offsetOrigin: 'top-right',
      // offset:[0,10],
      //图标缩放比例
      scale: 2,
      //透明度
      opacity: 0.75,
      //图标的url
      src: icon
    })
  })
}

// 图片标注
const addImageVectorLabel  =(coordinate)=>{
  const newFeature = new Feature({
    // 几何信息
    geometry: new Point(coordinate) // 点几何信息
  })
  newFeature.setStyle(createImageLabelStyle()) // 设置样式
  vectorSource.value.addFeature(newFeature)
}

const addVectorLabel = (coordinate) => {
  const newFeature = new Feature({
    geometry: new Point(coordinate),
    name: '图文标识'
  });
  newFeature.setStyle(createLabelStyle(newFeature));
  vectorSource.value.addFeature(newFeature);
}

const createLabelStyle = (feature) => {
  return new Style({
    image: new Icon(//图片标注
      ({
        anchor: [0.5, -30],
        anchorOrigin: 'top-right',
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        offsetOrigin: 'top-right',
        // offset:[0,10],
        //图标缩放比例
        // scale:0.5,
        //透明度
        opacity: 0.75,
        //图标的url
        src: icon
      })),
    text: new Text({//文本标注
      //位置
      textAlign: 'center',
      //基准线
      textBaseline: 'middle',
      //文字样式
      font: 'normal 14px 微软雅黑',
      //文本内容
      text: feature.get('name'),
      //文本填充样式（即文字颜色）
      fill: new Fill({ color: '#ff3300' }),
      stroke: new Stroke({ color: '#ffcc33', width: 2 })
    })
  });
}

const initMap = () => {
  map.value = new Map({
    target:'map',
    layers: [
      new TileLayer({
        source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
      })
    ],
    //配置视图
    view: new View({
      center: [113.24981689453125, 23.126468438108688], //视图中心位置
      projection: "EPSG:4326", //指定投影
      zoom: 12   //缩放到的级别
    })
  })

  map.value.on('click',(evt)=>{
    // 点击坐标
    const point = evt.coordinate;
    switch (type.value){
      case 'image': {
        addImageVectorLabel(point)
        break;
      }
      case 'text': {
        addTextVectorLabel(point);
        break;
      }
      case "image_text":{
        addVectorLabel(point)
        break;
      }
      case "overlay":{
        break;
      }
      case "cluster":{
        break;
      }
    }

  })
  vectorSource.value = new VectorSource();
  const vectorLayer = new VectorLayer({
    source: vectorSource.value
  })
  map.value.addLayer(vectorLayer);
}

const markerChange = (val) => {
  type.value = val;
}

onMounted(initMap)
</script>

<template>
  <!--地图挂载dom-->
  <div id="map">
    <div class="MapTool">
      <el-select v-model="type" placeholder="请选择" @change="markerChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<style>
#map {
  width: 100%;
  height: 100%;
}

.MapTool {
  position: absolute;
  top: .5em;
  right: .5em;
  z-index: 9999;
}
.marker {
  width: 50px;
  height: 50px;
  border: 1px solid #163488;
  border-radius: 25px;
  background-color: #ff2f4d;
}

.address {
  text-decoration: none;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-shadow: black 0.1em 0.1em 0.2em;
}
</style>